<template>
  <a-row :gutter="24">
    <a-col :md="24">
      <a-card :style="cardStyle" :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :md="5" :sm="24">
                <a-form-item label="商品信息" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input placeholder="条码/名称/规格/型号/颜色" v-model="queryParam.materialParam"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="5" :sm="24">
                <a-form-item label="销售员" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <!-- <a-input placeholder="请输入销售员" v-model="queryParam.saleMan"></a-input> -->

                  <a-select
                    placeholder="选择销售员"
                    showSearch
                    optionFilterProp="children"
                    v-model="queryParam.saleMan"
                    allow-clear
                  >
                    <a-select-option v-for="(item, index) in userList" :key="index" :value="item.id">
                      {{ item.userName }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="采购员" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-select
                    placeholder="选择采购员"
                    showSearch
                    v-model="queryParam.supplierSalesMan"
                    :dropdownMatchSelectWidth="false"
                    optionFilterProp="children"
                    allowClear
                  >
                    <a-select-option v-for="(item, index) in purchaseList" :key="index" :value="item.id">
                      {{ item.username }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="5" :sm="24">
                <a-form-item label="部门" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <!-- <a-input placeholder="请输入部门" v-model="queryParam.department"></a-input> -->
                  <a-select
                    placeholder="选择部门"
                    showSearch
                    optionFilterProp="children"
                    v-model="queryParam.department"
                    allow-clear
                  >
                    <a-select-option v-for="(item, index) in departmentList" :key="index" :value="item.name">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="24">
                <a-form-item label="单据日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-range-picker
                    style="width: 100%"
                    v-model="queryParam.createTimeRange"
                    :default-value="defaultTimeStr"
                    format="YYYY-MM-DD"
                    :placeholder="['开始时间', '结束时间']"
                    @change="onDateChange"
                    @ok="onDateOk"
                  />
                </a-form-item>
              </a-col>
              <a-col :md="5" :sm="24">
                <a-form-item label="订单编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input placeholder="请输入订单编号" v-model="queryParam.orderNumber"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                  <a-button type="primary" @click="searchQuery">查询</a-button>
                  <a-button type="primary" style="margin-left: 8px" icon="download" @click="handleExportXls('销售明细')"
                    >导出</a-button
                  >
                  <!-- <a-button style="margin-left: 8px" @click="exportExcel" icon="download">导出</a-button> -->
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <!-- table区域-begin -->
        <!-- <section ref="print" id="reportPrint"> -->
        <a-table
          bordered
          ref="table"
          size="middle"
          :rowKey="
            (e, index) => {
              return index
            }
          "
          :columns="columns"
          :dataSource="dataSource"
          :components="handleDrag(columns)"
          :pagination="false"
          :scroll="scroll"
          :loading="loading"
        >
          <!-- <template slot="customHasFinancialFlag" slot-scope="text, record">
            <a-tag v-if="record.hasFinancialFlag" color="green">有</a-tag>
            <a-tag v-if="!record.hasFinancialFlag" color="red">无</a-tag>
          </template> -->
        </a-table>
        <a-row :gutter="24" style="margin-top: 8px; text-align: right">
          <a-col :md="24" :sm="24">
            <a-pagination
              @change="paginationChange"
              @showSizeChange="paginationShowSizeChange"
              size="small"
              show-size-changer
              :showQuickJumper="true"
              :current="ipagination.current"
              :page-size="ipagination.pageSize"
              :page-size-options="ipagination.pageSizeOptions"
              :total="ipagination.total"
              :show-total="(total, range) => `共 ${total} 条`"
            >
              <template slot="buildOptionText" slot-scope="props">
                <span>{{ props.value - 1 }}条/页</span>
              </template>
            </a-pagination>
          </a-col>
        </a-row>
        <!-- </section> -->
        <!-- table区域-end -->
      </a-card>
    </a-col>
  </a-row>
</template>
<script>
import { getAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { openDownloadDialog, sheet2blob } from '@/utils/util'
import { getUserList, depAllList, queryUserListByRoleId } from '@/api/api'
import { getNowFormatMonth } from '@/utils/util'
import moment from 'moment'
export default {
  name: 'SalesDetailsList',
  mixins: [JeecgListMixin],
  components: {},
  data() {
    return {
      departmentList: [],
      userList: [],
      labelCol: {
        span: 5,
      },
      wrapperCol: {
        span: 18,
        offset: 1,
      },
      // 查询条件
      queryParam: {
        column: 'createTime',
        order: 'DESC',
        beginTime: getNowFormatMonth() + '-01',
        endTime: moment().format('YYYY-MM-DD'),
        pouringGoods: 1,
      },
      ipagination: {
        pageSize: 10,
        pageSizeOptions: ['11', '21', '31', '101', '201', '301', '1001', '2001', '3001'],
      },
      // 表头
      columns: [
        { title: '时间', dataIndex: 'createTime', width: 140, ellipsis: true },
        { title: '订单号', dataIndex: 'number', width: 140, ellipsis: true },
        { title: '销售类型', dataIndex: 'subType', width: 140, ellipsis: true },
        { title: '部门', dataIndex: 'orgAbr', width: 140, ellipsis: true },
        { title: '业务员', dataIndex: 'username', width: 140, ellipsis: true },
        { title: '采购员', dataIndex: 'supplierSalesMan', width: 140, ellipsis: true },
        { title: '货物品名', dataIndex: 'name', width: 140, ellipsis: true },
        { title: '金额', dataIndex: 'allPrice', width: 140, ellipsis: true },
        { title: '单位', dataIndex: 'materialUnit', width: 140, ellipsis: true },
        { title: '数量', dataIndex: 'operNumber', width: 140, ellipsis: true },
        { title: '销售单价', dataIndex: 'unitPrice', width: 140, ellipsis: true },
        { title: '极限价', dataIndex: 'lowdecimal', width: 140, ellipsis: true },
        { title: 'VIP价', dataIndex: 'wholesaledecimal', width: 140, ellipsis: true },
        { title: '采购价', dataIndex: 'purchaseDecimal', width: 140, ellipsis: true },
        { title: '大客户价', dataIndex: 'commodityDecimal', width: 140, ellipsis: true },
        { title: '成本', dataIndex: 'inDecimal', width: 140, ellipsis: true },
        // { title: '成本', dataIndex: 'costDecimal', width: 140, ellipsis: true },
        { title: '运输成本', dataIndex: 'transportCost', width: 140, ellipsis: true },
        { title: '订单备注', dataIndex: 'remark', width: 140, ellipsis: true },
        { title: '出库备注', dataIndex: 'ckRemark', width: 140, ellipsis: true },
        // {
        //   title: '是否有付款单',
        //   dataIndex: 'hasFinancialFlag',
        //   width: 140,
        //   ellipsis: true,
        //   scopedSlots: { customRender: 'customHasFinancialFlag' },
        // },
        { title: '运费', dataIndex: 'otherMoney', width: 140, ellipsis: true },
        { title: '待收款/待付款', dataIndex: 'debt', width: 140, ellipsis: true },
        { title: '收款时间', dataIndex: 'collectionOverTime', width: 180, ellipsis: true },
      ],

      url: {
        list: '/depotHead/getListWithStock',
        exportXlsUrl: '/depotHead/listWithStockExcel',
      },
      defaultTimeStr: '',
      purchaseList: [],
    }
  },
  created() {
    this.initPurchase()
    this.defaultTimeStr = [
      moment(getNowFormatMonth() + '-01', this.dateFormat),
      moment(this.currentDay, this.dateFormat),
    ]
    getUserList({}).then((res) => {
      if (res) {
        this.userList = res
      }
    })
    depAllList({
      search: { name: '', type: '' },
      column: 'createTime',
      order: 'desc',
      field: 'id,,,action,name,sort,enabled',
      currentPage: 1,
      pageSize: 1000,
    }).then((res) => {
      if (res.data.rows) {
        this.departmentList = res.data.rows
      }
    })
  },
  mounted() {},
  methods: {
    initPurchase() {
      queryUserListByRoleId({ roleId: 23 }).then((res) => {
        if (res) {
          this.purchaseList = res.data.users
        }
      })
    },
    getQueryParams() {
      let param = Object.assign({}, this.queryParam, this.isorter)
      // if (this.depotSelected && this.depotSelected.length > 0) {
      //   param.depotIds = this.depotSelected.join()
      // }
      param.field = this.getQueryField()
      param.currentPage = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      return param
    },
    searchQuery() {
      this.loadData(1)
    },
    loadData(arg) {
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      let params = this.getQueryParams() //查询条件
      this.loading = true
      getAction(this.url.list, params).then((res) => {
        // console.log(res.data.rows)
        if (res.code === 200) {
          this.dataSource = res.data.rows
          this.ipagination.total = res.data.total
          // this.tableAddTotalRow(this.columns, this.dataSource)
        }
        if (res.code === 510) {
          this.$message.warning(res.data)
        }
        this.loading = false
      })
    },
    onDateChange: function (value, dateString) {
      this.queryParam.beginTime = dateString[0] ? dateString[0] : null
      this.queryParam.endTime = dateString[1] ? dateString[1] : null
    },
    onDateOk(value) {
      console.log(value)
    },
    exportExcel() {
      let aoa = [
        [
          '时间',
          '部门',
          '业务员',
          '货物品名',
          '金额',
          '单位',
          '数量',
          '极限价',
          'VIP价',
          '采购价',
          '大客户价',
          '成本',
          '销售单价',
          '备注',
        ],
      ]
      for (let i = 0; i < this.dataSource.length; i++) {
        let ds = this.dataSource[i]
        let item = [
          ds.createTime,
          ds.orgAbr,
          ds.username,
          ds.name,
          ds.allPrice,
          ds.materialUnit,
          ds.operNumber,
          ds.lowdecimal,
          ds.wholesaledecimal,
          ds.purchaseDecimal,
          ds.commodityDecimal,
          ds.costDecimal,
          ds.unitPrice,
          ds.remark,
        ]
        aoa.push(item)
      }
      openDownloadDialog(sheet2blob(aoa), '倒货明细')
    },
  },
}
</script>

<style scoped>
@import '~@assets/less/common.less';
</style>
<style scoped>
.item-info {
  float: left;
  width: 30px;
  height: 30px;
  margin-left: 8px;
}
.item-img {
  cursor: pointer;
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>